<template>
    <div class="pagination">
        <el-pagination
            :current-page="props.page"
            :page-size="props.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="props.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script lang="ts" setup>
interface propsType {
    page: number;
    pageSize: number;
    total: number;
}
const props = withDefaults(defineProps<propsType>(), {
    page: 0,
    pageSize: 0,
    total: 0,
});
interface emitProps {
    page: number;
    pageSize: number;
}
const emit = defineEmits<{
    (e: 'change', { page, pageSize }: emitProps): void;
}>();
const handleSizeChange = (val: number) => {
    emit('change', { page: props.page, pageSize: val });
};
const handleCurrentChange = (val: number) => {
    emit('change', { page: val, pageSize: props.pageSize });
};
</script>
<style lang="scss" scoped>
.pagination {
    overflow: hidden;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
